<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
            height: 40px;
            cursor: pointer;
        }

        table tr:nth-child(1) {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>


    <table>
        <caption>广东省近10年高考状元</caption>
        <tr>
            <th>年份</th>
            <th>文理</th>
            <th>姓名</th>
            <th>毕业学校</th>
            <th>分数</th>
        </tr>
        <script>
            // 数据准备
            let students = [
                { year: 2022, name: '彭晨昊', 'Arts/Sciences': '理科', school: '上高二中', score: 683 },
                { year: 2022, name: '黄玉洁', 'Arts/Sciences': '理科', school: '丰城中学', score: 683 },
                { year: 2022, name: '朱逸飞', 'Arts/Sciences': '理科', school: '深圳厚德外国语', score: 683 },
                { year: 2022, name: '徐晶钥', 'Arts/Sciences': '文科', school: '铜鼓中学', score: 663 },

                { year: 2021, name: '文晨儒', 'Arts/Sciences': '理科', school: '广州五中', score: 708 },
                { year: 2021, name: '郭思含', 'Arts/Sciences': '文科', school: '深圳厚德外国语', score: 674 },

                { year: 2020, name: '尹天骥', 'Arts/Sciences': '理科', school: '珠江二中', score: 705 },
                { year: 2020, name: '杨诗雨', 'Arts/Sciences': '文科', school: '江科附中', score: 671 },

                { year: 2019, name: '高云浩', 'Arts/Sciences': '理科', school: '深圳一中', score: 703 },
                { year: 2019, name: '邱瑞昆', 'Arts/Sciences': '文科', school: '临川一中', score: 671 },

                { year: 2018, name: '付琳柯', 'Arts/Sciences': '理科', school: '宝安一中', score: 718 },
                { year: 2018, name: '刘梦', 'Arts/Sciences': '文科', school: '龙华附中', score: 674 },

            ]

            // 渲染页面
            for (let i = 0; i < students.length; i++) {
                document.write(`
                <tr>
                    <td>${students[i].year}</td>
                    <td>${students[i].name}</td>
                    <td>${students[i]['Arts/Sciences']}</td>
                    <td>${students[i].school}</td>
                    <td>${students[i].score}</td>
                </tr>

                `)

            }

        </script>


        </tr>
    </table>

</body>

</html>